<template>
	<view class="OrderModule por">
		<!-- 		<view class="module poa dis" :style="{background: incomeType[1].color}" v-if="incomeBool">
			<text class="font-weight-600 color-f size-24">{{incomeType[1].name}}</text>
		</view> -->
		<!--  :class="{'paddingTop28':incomeBool}" -->
		<view class="service dis-cen">
			<view class="service-backd size-28 font-weight-600"
				:style="{background: orderType[item.deliveryType].back,color: orderType[item.deliveryType].text}">
				{{orderType[item.deliveryType].name}} #{{item.id}}
				<!-- <text class="price-font color size-32 margin-left-12">¥{{item.amount || '0'}}</text> -->
			</view>
			<view class="size-30 color3 font-weight-600">
				<text class="color">{{item.startTime ||'00:00'}}-{{item.endTime || '00:00'}}</text>
				<!-- <text class="color">{{item.startTime ||'00:00'}}-{{item.endTime || '00:00'}}</text> -->
				<text class="margin-left-12">送达</text>
			</view>
		</view>
		<view @click="onJumpPage(item.orderId)" :url="`/packageOrder/details/substitute?id=${item.orderId}`"
			class="station">
			<view class="take por" v-if="item.deliveryType == 1">
				<view class="segm poa height100"></view>
				<view v-for="(items,indx) in item.pickSiteInfoList" :key="indx">
					<view class="name flex">
						<view class="name-icon por">
							<image class="width-height100" src="@/static/icon/qu.png" mode="" v-if="indx == 0">
							</image>
						</view>
						<text class="name-widths font-weight-600 color0 size-42 margin-left-12">
							<text class="size-34" v-if="items.codeType == 3">取件图片{{items.pickInfos.length}}张</text>
							<text v-else>{{items.siteName || '驿站名称'}}</text>
						</text>
					</view>
					<view class="name-imgs stage dis-ali font-weight-500 size-24"
						v-if="items.goend*1 == 1 && item.orderStatus == 4">
						该驿站{{items.endTime}}关门，请注意提前取件</view>
					<view class="name-img flex font-weight-400 color3 size-32" v-if="items.codeType == 1">
						{{items.pickInfos.length}}件包裹：
						<view class="color3 codes">
							<text v-for="(itemz,index) in items.pickInfos" :key="index">
								<text v-if="index != 0">、</text>
								<text>{{item.orderStatus == 3 ? '*******' : itemz.pickCodes}}</text>
							</text>
						</view>
					</view>
					<view class="name-img take-img" v-else-if="items.codeType == 3">
						<view class="name-fors" v-for="(ress,inxs) in items.pickInfos" :key="inxs" @click="onPreviewImage(items.pickInfos,inxs,true)">
							<u--image radius="12rpx" width="120rpx" height="120rpx"
								:src="item.orderStatus != 3 ? ress.pickCodes : '1'">
								<view slot="error" style="font-size: 24rpx;background: #F1F1F1;"
									v-if="item.orderStatus == 3">接单查看</view>
								<view slot="error" style="font-size: 24rpx;background: #F1F1F1;" v-else>加载失败</view>
							</u--image>
						</view>
					</view>
				</view>
			</view>
			<view class="take por" v-if="item.deliveryType == 2">
				<view class="segm poa height100"></view>
				<view>
					<view class="name flex margin-bottom-24">
						<view class="name-icon por">
							<image class="width-height100" src="@/static/icon/mai.png" mode=""></image>
						</view>
						<text class="name-widths font-weight-600 color0 size-42 margin-left-12">
							{{item.purchases.bodyText || '-'}}
						</text>
					</view>
					<view class="name-imgs take-img margin-bottom-16" v-if="item.purchases.imgs.length">
						<view class="name-fors" v-for="(res,inx) in item.purchases.imgs" :key="inx" @click="onPreviewImage(item.purchases.imgs,inx)">
							<u--image radius="12rpx" width="120rpx" height="120rpx"
								:src="item.orderStatus != 3 ? res : '1'">
								<view slot="error" style="font-size: 24rpx;background: #F1F1F1;"
									v-if="item.orderStatus == 3">接单查看</view>
								<view slot="error" style="font-size: 24rpx;background: #F1F1F1;" v-else>加载失败</view>
							</u--image>
						</view>
					</view>
					<view class="name-imgs font-weight-400 size-32 color6">请就近购买，送达后收款：<text class="color">小票为准</text>
					</view>
				</view>
			</view>
			<view class="take por" v-if="item.deliveryType == 3">
				<view class="segm poa height100"></view>
				<view>
					<view class="name flex margin-bottom-24" v-for="(resx,inxs) in item.goodsDelivery.goodsDetailList"
						:key="inxs">
						<view class="name-icon por">
							<image class="width-height100" src="@/static/icon/mai.png" mode="" v-if="inxs == 0">
							</image>
						</view>
						<view class="name-widths dis-cen color3 margin-left-12">
							<text class="font-weight-600 size-36">{{resx.goodsName || '-'}}</text>
							<text class="font-weight-400 size-32">x{{resx.goodsCount || 0}}</text>
						</view>
					</view>
					<view class="name-imgs size-40 color font-weight-600">
						<text
							class="font-weight-400 size-32 color6">指定地点取货，送达需收款：</text>¥{{item.goodsDelivery.payableAmount || 0}}
					</view>
				</view>
			</view>
			<view class="name flex">
				<view class="name-icon por">
					<image class="width-height100" src="@/static/icon/song.png" mode=""></image>
				</view>
				<view class="name-widths font-weight-600 color0 size-42 margin-left-12">
					<text>{{item.communityName}}</text>
					<text v-if="item.houseNumber">{{item.houseNumber}}</text>
					<text v-else>{{item.addressInfo}}</text>
				</view>
			</view>
			<view class="name-img dis-ali font-weight-400 color3 size-32">
				{{item.consignee}}{{sexData[item.sex]}}：{{item.phone}}
			</view>
		</view>
		<slot name="order-button"></slot>
		<!-- </view> -->
	</view>
</template>

<script>
	import { sexData } from "@/utils/enumeration/index"
	import { orderType } from "@/utils/enumeration/index"
	export default {
		name: "OrderModule",
		props: {
			index: {
				type: Number,
				default: 0
			},
			viewImage: {
				type: Boolean,
				default: false
			},
			// 是否是收入进来的
			// incomeBool: {
			// 	type: Boolean,
			// 	default: false
			// },
			item: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				orderType,
				sexData,
				// incomeType: {
				// 	0: { name: '待结算', color: '#FF7A3C' },
				// 	1: { name: '已结算', color: '#FF4444' }
				// },
			}
		},
		methods: {
			onJumpPage(id) {
				this.$emit('jumpPage', id)
			},
			// 查看大图
			onPreviewImage(list, index,bool) {
				console.log('list',list)
				if(!this.viewImage || this.item.orderStatus == 3) return
				let lists = []
				if(bool) {
					list.map(res => {
						lists.push(res.pickCodes)
					})
				}
				uni.previewImage({
					current: index * 1,
					urls: bool ? lists : list
				});
			},
		}
	}
</script>

<style lang="scss">
	.OrderModule {
		padding: 16rpx 16rpx 28rpx;
		display: grid;
		grid-row-gap: 40rpx;

		.service-backd {
			padding: 12rpx 16rpx;
			border-radius: 8rpx;
		}

		.module {
			top: 0;
			left: 0;
			width: 114rpx;
			height: 40rpx;
			border-radius: 12rpx 0 12rpx 0;
		}

		.name-width {
			display: block;
			max-width: 200rpx;
			white-space: pre-wrap;
		}

		.income {
			width: 100%;
			height: 28rpx;
		}

		.service {
			padding: 0 8rpx 0 4rpx;
		}

		// .paddingTop28 {
		// 	padding-top: 28rpx;
		// }

		.name {
			// margin-bottom: 2rpx;

			.name-icon {
				width: 48rpx;
				height: 48rpx;
				z-index: 1;
				margin-top: 7rpx;

				.width-height100 {
					border: 4rpx solid #ffffff;
					box-sizing: border-box;
				}
			}

			.name-widths {
				width: 90%;
			}
		}

		.segm {
			width: 1px;
			left: 22rpx;
			top: 20rpx;
			background: #E2E2E2;
		}

		.stage {
			color: #0C8EEB;
		}

		.name-img {
			padding-top: 4rpx;
		}

		.take-img {
			display: grid;
			grid-template-columns: repeat(4, 120rpx);
			grid-gap: 16rpx;
		}

		.name-img,
		.name-imgs {
			margin-left: 58rpx;

			.codes {
				width: 76%;
				word-break: break-all;
			}
		}

		.take {
			display: grid;
			grid-row-gap: 26rpx;
			padding-bottom: 36rpx;
		}
	}
</style>